<template>
  <div class="tallcom">
    <div class="header">
        <img :src="imgURL"/>
        <h3>{{ uname }}</h3>
        <button>搜索</button>
    </div>
    <!--信息列表-->
    <ol class="list">
        <li v-for="(item,index) in persons" :key="item.id" :class="{active:item.boolean}" @touchstart="showDel(index)">
            <article class="main">
                <img :src='item.imgURL' alt="">
                <h3>
                    <span>{{item.name}}</span>
                    <p>{{item.msg}}</p>
                </h3>
                <h4>
                    <strong>{{item.times}}</strong>
                    <!-- 如果点击进行信息详情页，show改为false，且不显示i标签 -->
                    <i v-show="item.show">1</i>
                </h4>
            </article>

            <button @click="Del(index)">删除</button>
        </li>
    </ol>
  </div>
</template>

<script setup>
import { reactive,ref } from 'vue';
// 移动端没有鼠标事件，而使用touch手势事件
/*touch事件
    touchstart:手指触摸到屏幕时即刻触发【类似点击事件】
    touchmove：当手指在屏幕移动时触发【左移/右移】
    touchend ： 当手指离开屏幕时即刻触发
    touchcancel ： 手指触摸屏幕时，系统打断touch的行为【在触发touchstart之前先进行拦截验证】
    touchmove的效果也可以使用第三方插件———swiper第三方插件事件
    swiperLeft / swiperRight ： 手指在屏幕向左/向右滑动时触发
    swiperDown / swiperUp： 手指在屏幕向下/向上滑动时触发
 */
let imgURL = ref(require('../assets/img/1.jpg'));
let uname = ref('Admin');
let persons = reactive([
	{ id : 1 , imgURL:require('../assets/img/2.webp'), name : 'admin' , msg : '兄弟，你会Vue.js吗？', times:'12-28', show : true, boolean : false },
	{ id : 2 , imgURL:require('../assets/img/3.webp'), name : 'zjm' , msg : '兄弟，你会Vue.js吗？', times:'12-28', show : true,boolean : false },
	{ id : 3 , imgURL:require('../assets/img/4.webp'), name : 'Tom' , msg : '兄弟，你会Vue.js吗？', times:'12-28', show : true,boolean : false }
])

// 手指触摸到屏幕对应的数据时，传递下标
const showDel = (i)=>{
    persons.forEach((item,index) => {
        if (index == i && !item.boolean) {
            item.boolean = true;
        }else{
            item.boolean = false;
        }
    });
}

const Del = (index)=>{
        persons.splice(index,1)
}

</script>

<style scoped>
*{
    padding: 0;
    margin: 0;
}
/* PC端看的话也居中 */
.tallcom{
    overflow: hidden;
}
.tallcom .header{
    /* 设置1rem= 50px */
    width: 100%;
    height: 9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tallcom .header img{
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
}
.tallcom .header h3{
    font-size: 2rem;
    padding: 0 3rem;
    background-color: #17a2b8;
    line-height: 6rem;
    border-radius: 1em;
}
.tallcom .header button{
    border: none;
    background-color: gray;
    padding: 1.5rem;
    font-size: 2rem;
    color: white;
    border-radius: 0.5em;
}
.tallcom .list{
    width: 100%;
    overflow: hidden;
    background-color: #d3d3d3;
    padding-top: 2rem;
    padding-bottom: 2em;
    
}
.tallcom .list li{
    background-color: white;
    border-bottom: 0.1rem solid gainsboro;
    /* 暂设宽度100% 动画时在修改*/
    width: 126%;
    height: 10rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    /*过渡动画*/
    transition: all 1s;
}
.tallcom .list li button{
    display: block;
    /*暂定 */
    width: 25%;
    background-color: #dc3545;
    height: 100%;
    border-radius: 0.8rem 0 0 0.8rem;/*各自调整圆角：顺时针方向：左上-右上-右下-左下 */
    border: 0;
    font-size: 1.8rem;
    color: white;
}
/*动画具体按钮效果*/
.tallcom .list li.active{
    width: 100%;
    background-color: #b0c4dc;
    transition: all 1s;
}
.tallcom .list li .main{
    width: 100%;
    height: 100%; /*设置高度100%必须时父级有明确单位的高度 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 2rem;
    font-size: 1.5rem;
}
.tallcom .list li .main img{
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
}
.tallcom .list li .main h3{
    width: 70%;
    height: 65%;
}
.tallcom .list li .main h3 span{
    display: block;
    line-height: 2rem;
    font-weight: bold;
}
.tallcom .list li .main h3 p{
    margin-top: 1.5rem;
    color: #9a9a9a;
    
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; /*强制不换行，才能让文本溢出省略 */
}
.tallcom .list li .main h4{
    width: 15%;
    height: 65%;
}
.tallcom .list li .main h4 strong{
    color: #9a9a9a;
    display: block;
}

.tallcom .list li .main h4 i{
    display: block;
    font-style: normal;/*i标签： 斜体字体：此处为清除i标签的斜体效果*/
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: #dc3545;
    color: white;
    text-align: center;
    line-height: 2rem;
    margin-top: 1.5rem;
}

</style>